<template>
        <el-dialog  title="修改地址" width="50%" align-center>
        <!-- 表单 -->
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="省市区/县" prop="region">
                <!-- 三级导航 -->
                <div class="example-block" :style="{ width:'100%'}">
                    <!-- <el-cascader v-model="value" :options="options" @change="handleChange" /> -->
                    <el-cascader v-model="editValue" :options="options" :props="props" @change="handleChange"
                        :style="{ width:'100%'}" size="large" clearable />
                </div>
            </el-form-item>

            <el-form-item label="详细地址" prop="name">
                <el-input v-model="ruleForm.name" size="large" @change="xxdzChange" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click=" takeValueF ">取消</el-button>
                <el-button type="primary"  @click="()=>{
                    takeValueF()
                } ">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
    
<script setup lang='ts'>
import type { FormInstance, FormRules } from 'element-plus'
import { ref, toRefs, reactive, onMounted } from 'vue'
// 导入城市列表，并且进行赋值
const myCityOption = require('./provinces-china-master/city_data2017_element');


// import { defineEmits } from "vue";  
// 父传子 ++++++
// type Props = { getBoolEdit: boolean }
// const myProps = defineProps<{
//     getBoolEdit: boolean
// }>()
// ++++++++++++++


// 地址修改的弹窗显示隐藏   
// 子传父  +++++
const myDuix = ref(false)  // 需要传递的数据
const emit = defineEmits(['sonValue'])  

// ++++++++
  


// 地址修改，三级导航+++++
const editValue = ref([])
const props = {
    expandTrigger: 'hover',
}

// 用来 存储 handleChange 和 xxdzChange 的 value
let myCity
let myXxdz
// let myValeDx = {}

// 用来 集成 myCity 和 myXxdz
let myValeDx = {
    myCity,
    myXxdz
}
let myCityArr:any[] = []

// 获取在输入框的值 ，并且 做出相对应的 逻辑操作  
const handleChange = (value: any) => {
    myValeDx.myCity = value
}
const xxdzChange = (value: any) => {
    myValeDx.myXxdz = value
}
// 最终 这是 点击 确定的按钮
const takeValueF = () => {
    // 将数据提交到 数组里
    myCityArr.push(myValeDx)
    // 这是 点击之后，让父组件，关掉我
    console.log(myCityArr)
    /*
    //限制只能添加 一个地址
    if (myCityArr.length > 1) {
    // console.log(myCityArr.length ,"长了呀")
    alert("只能添加一个地址！")
    }
    */
    

    emit('sonValue', myDuix)
}

// 这里下拉框内的省市区的列表 
const options:any[] = []
for (const key in myCityOption) {
    if (Object.prototype.hasOwnProperty.call(myCityOption, key)) {
        const myCity = myCityOption[key];
        options.push(...myCity)
    }
}
// console.log(options)

//  限制输入框 的 规矩
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
    name: '',
    // region: '',

})


const rules = reactive<FormRules>({
    name: [
        { required: true, message: '输入框不能为空', trigger: 'blur' },
        // { min: 2, max: 3, message: '请填写相应的地址', trigger: 'blur' },
    ],
    // region: [
    //     {
    //         required: true,
    //         // message: '输入框不能为空',
    //         trigger: 'change',
            
    //     },
    //     // { min: 2, max: 3, message: '请填写相应的地址', trigger: 'blur' },
    // ]
})

// ++++++

</script>
    
<style scoped lang='scss' >
    
</style>